<template>
  <div
    class="cable-tabs absolute el-tabs el-tabs--card el-tabs--left"
    :class="mapType !== 'GisView' ? 'hide-header' : ''"
    @mouseover="$emit('mouseover')"
    @mouseleave="$emit('leave')"
  >
    <div class="el-tabs__header is-left">
      <div
        v-for="item in cableList"
        :key="item.cableDetailShow"
        class="el-tabs__item is-left"
        :class="[activeName === item.cableId ? 'is-active' : '']"
        @mouseleave="handleHover(false)"
        @mouseover="handleHover(true, item)"
        @click="clickTab($event, item, 'left')"
        @contextmenu.prevent.stop="clickTab($event, item, 'right')"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="el-tabs__content">
      <div class="el-tab-pane p-10">
        <p class="title pb-10">{{ activeEdge.label }}</p>
        <div class="flex flex-wrap justify-between pt-10">
          <p class="w-50">
            <span class="item-name">{{ $t('STATE') }}：</span>
            <span
              class="item-value"
              :style="{ color: activeEdge.status === 'DAMAGE' ? '#cc3333' : '' }"
            >
              {{ activeEdge.status === 'DAMAGE' ? $t('DAMAGE') : $t('NORMAL') }}
            </span>
          </p>
          <p class="w-50">
            <span class="item-name">{{ $t('LENGTH_KM') }}：</span>
            <span class="item-value">{{ activeEdge.subInfo.length }}</span>
          </p>
          <p class="w-100">
            <span class="item-name">{{ $t('CAPACITY') }}：</span>
            <span class="item-value">{{ activeEdge.subInfo.sum || 0 }}</span>
          </p>
        </div>
        <div class="flex flex-wrap justify-between pl-10 mt-5">
          <p class="w-50">
            <span class="item-name capacity-name">{{ $t('IDLE') }}：</span>
            <span class="item-value">{{ activeEdge.subInfo.idle || 0 }}</span>
          </p>
          <p class="w-50">
            <span class="item-name capacity-name">{{ $t('CONNECTED') }}：</span>
            <span class="item-value">{{ activeEdge.subInfo.conn || 0 }}</span>
          </p>
          <p class="w-50">
            <span class="item-name capacity-name">{{ $t('DAMAGE') }}：</span>
            <span class="item-value">{{ activeEdge.subInfo.damage || 0 }}</span>
          </p>
          <p class="w-50">
            <span class="item-name capacity-name">{{ $t('MAIN') }}：</span>
            <span class="item-value">{{ activeEdge.subInfo.main || 0 }}</span>
          </p>
          <p class="w-50">
            <span class="item-name capacity-name">{{ $t('STANDBY') }}：</span>
            <span class="item-value">{{ activeEdge.subInfo.backup || 0 }}</span>
          </p>
          <p class="w-50">
            <span class="item-name capacity-name">{{ $t('PORT_STATUS_PROCESS') }}：</span>
            <span class="item-value">{{ activeEdge.subInfo.process || 0 }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    props: {
      cable: {
        type: Object,
        default: () => {}
      },
      cableList: {
        type: Array,
        default: () => []
      },
      mapType: {
        type: String,
        default: 'GisView'
      }
    },
    data() {
      return {
        activeName: '',
        activeEdge: { subInfo: {}}
      }
    },
    computed: {
      ...mapGetters(['dictMap'])
    },
    watch: {
      cable: {
        handler(newVal, oldVal) {
          this.activeName = newVal ? newVal.id : ''
          if (!this.activeName) return
          this.activeEdge = this.cableList.find(i => i.id === this.activeName)
        }
      }
    },
    methods: {
      handleHover(hover, item) {
        if (item) {
          this.activeEdge = item
          this.activeName = item.cableId
          this.$emit('cableTabsHover', item.cableId)
        }
      },
      clickTab(event, item, side) {
        // console.log(event)
        this.$emit('clickTab', {
          ...item,
          clickBtn: side,
          left: event.clientX - 15,
          top: event.clientY
        })
      }
    }
  }
</script>
<style lang="scss">
  @import '@/assets/css/mixin.module.scss';
  .cable-tabs {
    font-size: 14px;
    z-index: 3;
    &.vergeBottom {
      .el-tabs__header {
        top:auto;
        bottom: 0;
      }
    }
    &.vergeLeft {
      .el-tabs__header {
        left:auto;
        right: 0;
      }
      .el-tabs__content {
        padding-left: 0;
        padding-right: 132px;
      }
    }
    &.hide-header {
      .el-tabs__header {
        display: none;
      }
      .el-tabs__content{
        padding-left: 0;
        padding-right: 0;
      }
    }
    .el-tabs__header {
      border-radius: 5px;
      border: none !important;
      margin-right: 0px !important;
      position: absolute;
      left:0;
      top:0;
      z-index: 9;
      width: 130px;
      height: auto !important;

      .el-tabs__item {
        border-radius: 5px;
        line-height: 32px;
        height: 32px;
        width: 130px;
        // white-space: nowrap;
        white-space: pre;
        overflow: hidden;
        text-overflow: ellipsis;
        user-select: none;
        -webkit-user-select: none;
        @include themeify {
        // background: themed('homeTooltipBg');
        // border: 1px solid themed('homeTooltipBorderColor');
        // box-shadow: 0px 0px 10px 0px themed('homeTooltipShadow');
      }
        @include themeify {
          color: themed('gisTitleColor');
          background: themed('homeTooltipBg');
        }
      }
    }
    .el-tabs__content {
      padding-left: 132px;
      .el-tab-pane {
        width: 240px;
        border-radius: 5px;
        @include themeify {
          color: themed('gisValueColor');
          background: themed('homeTooltipBg');
          // border: 1px solid themed('homeTooltipBorderColor');
          box-shadow: 0px 0px 10px 0px themed('homeTooltipShadow');
        }
        .title {
          @include themeify {
            border-bottom: 1px solid themed('gisTitleColor');
          }
        }
        .item-name {
          @include themeify {
            color: themed('gisTitleColor');
          }
        }
        .item-value {
          @include themeify {
            color: themed('gisValueColor');
          }
        }
      }
    }
  }
</style>
